<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>工程重修项目订单</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/wechat/adds.css">
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="__JS__/swayPlugIn.js"></script>
    <script src="__JS__/vue.js"></script>
    <style type="text/css">
    	.imgborder{
    	 	/*overflow: auto;*/
    	 	border-bottom: 1px solid #ddd;
    	}
    	.inputborder{
    		background: #286090;
		    height: 32px;
		    line-height: 32px;
		    border-radius: 7px;
		    position: relative;
		    top: 10px;
    	}
    	.inputborder p{
    		color: #fff;
    		padding: 0 8px;
    	}
    	#file0{
    		opacity: 0;
    		position: absolute;
		    top: 0;
		    left: 0;
    	}
    	img{
    	  	display: block;
    	  	/*float:right;*/
            height:100px;
            width:100px;
            margin:0 auto 15px;
            border:1px solid #ddd;
        }
    </style>
</head>
<body>
    <div id="contentBox">
        <div class="row row1">
            <div>
                <form id="form1" >
                    <div class="one">
                        <label for="username">项目名称：</label>
                        <input type="text" :value="order.name" name='cname' />
                    </div>
                    <div class="one">
                        <label for="username">提交人：</label>
                        <input name="uname" type="text" :value="create.name"  />                     
                    </div>                      
                   <div class="one" style="position: relative;">
                        <label for="username">负责人：</label>
                       
                        <input type="text"  name="" list="peple"  v-model="fzr" @keyup="fzrck"/>
						<ul v-if="lists7.length!=0" style="position:absolute;width: 75%;display: block;background: white; left: 25%; top:50px;z-index: 4000;border:1px solid #ccc;">
							<li @click="fzrck3(list7.name,list7.rname,list7.uid)" style="height: 30px;line-height: 30px;border-bottom:1px solid #ccc;" v-for="list7 in lists7">{{list7.name}}&nbsp;&nbsp;&nbsp;{{list7.rname}}</li>
						</ul>						  
						<input type="hidden" name="uid" v-model="list7uid"/>
                    </div>
                    
                    <div class="one">
                        <label for="username">审查人：</label>
                        <input type="text" :value="juryMan.name" readonly autocomplete="off"/>
                    </div>
                    <div class="one">
                        <label for="username">审查人身份：</label>
                        <input type="text" :value="juryMan.duty" autocomplete="off"/>
                    </div>
                     <div class="one text">
                     	<label for="username">重修原因：</label>
                        <textarea :value="juryMan.note" rows="5" name="content" cols="27" autocomplete="off" placeholder=""></textarea>
                    </div>
                    
                    <div class="one">
                        <label for="username">金额：</label>
                        <input type="number" :value="order.acamount" id="amoneys" name='amoneys' autocomplete="off"/>
                        <span style="position: absolute;right: 0;top: 0;">元</span>
                    </div>
                    <div class="one">
                        <label for="passwowd">周期：</label>
                        <input type="text" :value="order.cycles" id="cycles" name="cycles" autocomplete="off"/>
                    </div>
                    <div class="one" style="position: relative;border: 0;">
                        <label for="passwowd">合同：</label>
                        <!--<input type="file" id="contract" name="contract" @change="contract($event)" style="position: absolute;left:20%;width:80%;right: 0;opacity: 0;z-index: 5;"/>
                        <span style="position: absolute; width:100%;display:block;text-align:center;left: 40px;top:0;z-index: 3;">{{file1}}</span>-->
                       <div class="inputborder">
                       		<p>请选择文件</p>
                       		<input type="file" name="contract"  id="file0" />
                       </div>           			
            		
                    </div>
                     <div class="imgborder">
                    	<img src="" id="img0" >
                    </div>
                    <div class="one text">
                        <textarea rows="5" :value="order.content" name="content" cols="27" autocomplete="off" placeholder="请输入详细描述"></textarea>
                    </div>
                    <div class="one text">
                        <textarea rows="3" :value="order.remarks" name="remarks" cols="27" autocomplete="off" placeholder="请输入备注"></textarea>
                    </div>
                    <div class="two">
                        <button type="button" id="send">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
	$(function(){    	
        $("#send").click(function(){
        	var cname=$("input[name='cname']").val();
	    	var uname=$("input[name='uname']").val();    
	    	var uid=$("input[name='uid']").val();
	    	var amoneys=$("input[name='amoneys']").val();
	    	var cycles=$("input[name='cycles']").val();
	    	var contract=$("input[name='contract']").prop("files")[0];//文件	    
	    	var content=$("input[name='content']").val();
	    	var remarks=$("input[name='remarks']").val();
	    
            for(var i = 0; i < $(".one input").length; i++){
                var val = $(".one input").eq(i).val();
                var name = $(".one input").eq(i).attr("name");
                if(val == ""){
                    if(name == "cname"){
                        swayPlugs.msg("请填写项目名称",1500);
                        return;
                    }else if(name == "amoneys"){
                        swayPlugs.msg("请填写项目金额",1500);
                        return;
                    }else if(name == "cycles"){
                        swayPlugs.msg("请填写项目周期",1500);
                        return;
                    }else if(name == "content"){
                        swayPlugs.msg("请填写项目描述",1500);
                        return;
                    }
                };
            }
//         method="post" action="{{:url('wechat/Cons/addpro')}}" enctype="multipart/form-data"
		   var formData = new FormData();
		   formData.append('cname', cname);
	       formData.append('uname', uname);
	       formData.append('uid', uid);
	       formData.append('amoneys', amoneys);
	       formData.append('cycles', cycles);
	       formData.append('contract', contract);
	       formData.append('content', content);
	       formData.append('remarks', remarks);
	      
	        $.ajax({
	        	url: '/index.php/wechat/Cons/addpro',
//	            url: '/index.php/reworkwechat/Cons/addpro',
	            type: 'POST',
	            cache: false,
	            data: formData,
	            processData: false,
	            contentType: false,
	            success: function (res) {
	                if (res.success) {
	                    alert('提交成功');
	//                  window.location.href("/CommonUser/MemberCardList");
	                } else {
	//                  alert(data.Msg);
	                }
	            }
	        })

        })
    })
    var vm=new Vue({
    	el:"#form1",
    	data:{
    		fzr:"",
    		lists7:[],   		
    		list7uid:"",
    		file1:"点击上传文件",
    		charge:[],
    		create:[],
    		juryMan:[],
    		order:[]
    	},
    	methods:{
    		fzrck:function(){
    			var _this=this;
    			$.post("{{:url('wechat/Cons/getresponseinfo')}}",{name:this.fzr},function(data){
	    			var data=JSON.parse(data);
		    		var data=data.data; 		    		
		    		_this.lists7=data;
		    		console.log(data)
	    		})
    		},fzrck3:function(name,rname,uid){
    			this.fzr=name+'  '+rname;
    			this.lists7.length=0;
    			this.list7uid=uid;
    		},
    		contract:function($event){
    			var FileList4=$("#contract").val();
    			this.file1=FileList4.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");
    		}
    		
    	},    	
    	created(){
    		var me=this;
    		var str = location.href;
			var str = str.split("id/")[1];
			var id = str.split(".html")[0];
    		$.post("{{:url('/manage/Affairengineering/rework')}}",{id:id},function(res){
    			var res=JSON.parse(res);
    			if(res.status==1){
    				var data=res.data;
    				me.charge=data.base.charge;
    				me.fzr=me.charge.name+' '+me.charge.duty;
					me.create=data.base.create;
					me.juryMan=data.jury.juryMan;
					me.order=data.order;
//					me.file1=me.order.url;
					 $("#img0").attr("src", me.order.url) ;
    			}   			
	    		
	    	})
    	}
    });
    
    //图片预览
    $("#file0").change(function(){
    	var file = $(this).val();
		var strFileName=file.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1");  //正则表达式获
		$(".inputborder p").html(strFileName);
        var objUrl = getObjectURL(this.files[0]) ;
        console.log("objUrl = "+objUrl) ;
        if (objUrl) {
            $("#img0").attr("src", objUrl) ;
        };
        if($(this).val()!=""){
            $(this).next().removeAttr("disabled");
        }else  if($(this).val()==""){
            $(this).next().attr("disabled","disabled");
        }
    }) ;
      //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        console.log(url);
        return url ;
    }
</script>
</html>